<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%@ include file="/v1/pages/public/head.jsp"%>
<body>
<%@ include file="/v1/pages/public/head_menu.jsp"%>

<div class=" ldh-mainCenter">
	<div class="cont_1240">
    	
   		<div class="download_qrcode" >
            <h2>下载本店二维码</h2>
            <table>
                  <colgroup>
                         <col width="20%" />
                         <col width="40%"/>
                         <col width="20%"/>
                  </colgroup>
                  <thead>
                      <tr>
                         <th class="text_left">二维码名称</th>
                         <th>二维码尺寸</th>
                         <th class="text_right">操作</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                         <td class="text_left">qrcode_150.png</td>
                         <td>150px X 150px</td>
                         <td class="text_right"><a href="javascript:void(0)">下载</a></td>  
                      </tr>
                      <tr>
                         <td class="text_left">qrcode_250.png</td>
                         <td>250px X 250px</td>
                         <td class="text_right"><a href="javascript:void(0)">下载</a></td>  
                      </tr>
                      <tr>
                         <td class="text_left">qrcode_400.png</td>
                         <td>400px X 400px</td>
                         <td class="text_right"><a href="javascript:void(0)">下载</a></td>  
                      </tr>
                      <tr>
                         <td class="text_left">qrcode_600.png</td>
                         <td>600px X 600px</td>
                         <td class="text_right"><a href="javascript:void(0)">下载</a></td>  
                      </tr>
                      <tr>
                         <td class="text_left">qrcode_1000.png</td>
                         <td>1000px X 1000px</td>
                         <td class="text_right"><a href="javascript:void(0)">下载</a></td>  
                      </tr>
                  </tbody>
              </table>
        </div> 
        <div id="down_qrcode" style="opacity:0; position:absolute; width:0px; height:0px; top:0; overflow:hidden;"></div>             
        <!-- 用来校验该浏览器是否支持HTML5 -->
        <canvas id="Canvas"></canvas>
    </div>
</div>
<%@ include file="/v1/pages/public/foot.jsp"%>
<script src="${ctx}/v1/js/default/qrcode.js"></script>
<script src="${ctx}/v1/js/default/jquery.qrcode.js"></script>
<script type="text/javascript">
$(function () {
	var shopId='${param.shopId}';
	
	var w_h=120;
	var q_text = "http://"+shopId+".storeme.cn";
	var tableName="150";
	new_qrcode(w_h,q_text);
	
	//生成二维码
	function new_qrcode(w_h,q_text){             
        $("#down_qrcode").qrcode({
          text: utf16to8(q_text),
          height: w_h,
          width: w_h
		   //此处添加了个logo，可以随意替换链接
          //,src: 'images/logo.jpg'
        });
	}
   /**
   * 下载二维码
   */   
   $(document).on("click",".download_qrcode a",function(){
	   	
	    var _index=$(this).parents("tr").index();
		if(_index==0){
			tableName="150";
			w_h=150;
			download_pic();
		}else if(_index==1){   
			tableName="250";w_h=250;download_pic();
		}else if(_index==2){
			w_h=400;tableName="400";download_pic();
		}else if(_index==3){  
			w_h=600;tableName="600";download_pic();
		}else if(_index==4){   
			w_h=1000;tableName="1000";download_pic();
		}
				
		function download_pic(){
			new_qrcode(w_h,q_text);
			var myCanvas = $("#down_qrcode").find("canvas")[0];
			var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
			var filename = 'qrcode_' + tableName + '.png'  ;
			
			var save_link = document.createElement("a");
			save_link.href = image;
			save_link.download = filename;
		  
			var event = document.createEvent('MouseEvents');
			event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			save_link.dispatchEvent(event);
		}
	}) 
		
})
function utf16to8(str) { //转码
  var out, i, len, c;
  out = "";
  len = str.length;
  for (i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
        out += str.charAt(i);
    } else if (c > 0x07FF) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    } else {
        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    }
  }
  return out;
}
</script>
<script>
$(function(){
	var img_lenght=$(".box_img").find("img").length;
	for(i=0;i<img_lenght;i++){
	    $(".box_img img:eq("+i+")").attr("id","index_pic"+i);
		ResizeImage("index_pic"+i,200,200);
	}
	
});
seajs.use([ctx+'/v1/js/custom/base/component-base.js',ctx+'/v1/js/custom/head/module-head.js'],function(m,head){
	m.init(m);	
	m.setFromPage("common");
	head.init(head,true);
});
</script>
</body>
</html>
